<template>
    <div class="process-monitoring-box">
        <commpVxeTable
         :key="tableKey"
         :isCanWrap="true"
         :config="dataTableConfig"
         :columns="columnsVxe"
         :formItem="formItem"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         ref="acceptanceRegistrationRef"
         >
            <template v-slot:operation_btn="{row}">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="reimburseClick(row)" icon="eye">查看</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <handleModal ref="handleModalRef" @resetEvent="resetEvent"></handleModal>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {
    queryByJodId
} from './service/index'
import handleModal from '../../internalControl/modal/handleModal'
export default {
    components:{
        commpVxeTable,
        handleModal
    },
    props:{},
    data(){
        return{
            tableKey:null,
            formItem:[
                {
                    label: '单据号',
                    model: 'fdjh',
                },{
                    label: '摘要',
                    model: 'fzy',
                },
            ],
            columnsVxe:[
            {
                    type: 'checkbox',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '单据号',
                    field: 'fdjh',
                    width: 200,
                },{
                    title: '报销类型',
                    field: 'fbxlx',
                    width: 100,
                },{
                    title: '标题',
                    field: 'fbt',
                },{
                    title: '摘要',
                    field: 'fzy',
                    align:'left',
                },{
                    title: '发送时间',
                    field: 'fsqsj',
                    width: 150,
                },{
                    title: '环节名称',
                    field: 'fhjmc',
                    width: 200,
                },{
                    title: '操作',
                    field: 'jobid',
                    width: 100,
                    titleInterval:true,
                    slots: {
                    // 使用插槽模板渲染
                        header:'data3_header',
                        default: 'operation_btn',
                    },
                }],
            dataTableConfig:{
                api: assessCheckApi.NkJcyYbList,
                rowId: 'id',
                urlType: true,
                paramet:{}
            },
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            //console.log('重置')
            this.tableKey = Date.now()
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        reimburseClick(row){
            //console.log(row)
            let data = {
                jobId: row.jobid?row.jobid:'',
                lcmbbm: row.flcmb,
                fpid: row.fpid,
            }
            queryByJodId(data).then(res => {
                //console.log(res)
                let resA = res.result
                    resA.hjmc = '我的已办'
                if(res.code == 200){
                    this.$nextTick(_ => {
                        this.$refs.handleModalRef.modalClick(resA)
                    })
                }
            })
        },
    }
}
</script>
